<template>
  <div class="special">

    <special-item :listData="item" v-for="item in spList" :key="item.id"></special-item>

    <!-- 上下翻页 -->
    <div class="btn">
      <van-button :disabled="!stop" @click="clickPreFn" >上一页</van-button>
      <van-button :disabled="stop" @click="clickNextFn">下一页</van-button>
    </div>

  </div>
</template>

<script>
import { GetTopicList } from "../../request/api"
import SpecialItem from "./children/SpecialItem"

export default {
  // 组件
  components: {
    SpecialItem,
  },

  data() {
    return {
      // 向上/下翻页 btn 禁用flag
      stop: false,
      // 列表 数据
      spList: [],
      // 总页数
      total_pages: 0,
      // 当前页数
      current_page: 1,
      // 页数条数
      current_size: 10,
    }
  },

  created() {
    this.getData(this.current_page)
  },

  methods: {
    
    async getData(page) {
      let params = {
        page: page,
        size: this.current_size,
      }
      let {data: res} = await GetTopicList(params);
      // 这里接口没有给报错的状态相关信息
      console.log(res);
      this.spList = res.data;
      this.total_pages = res.totalPages;
      this.current_page = res.currentPage;
      // console.log("请求时返回的当前页数", this.current_page)
      // console.log("请求时返回的总页数", this.total_pages)

      // 并处理 按钮的禁用情况 
      this.handleBtn(this.current_page, this.total_pages);
    },

    handleBtn(curPage, totalPages) {
      // 当前页数是否等于1, 等于1就禁用状态
      if (curPage == 1) {
        this.stop = false;  // 修改上一页按钮停用状态
      }
      // 大于等于总页数,不可以继续点击下一页，禁用
      if (curPage >= totalPages) {
        this.stop = true;  // 修改下一页按钮停用状态
      }
    },
    
    clickPreFn() {   
      console.log("pre")
      // 因为按钮禁用状态是不能点击按钮, 触发到这个方法的
      // 请求下一页的数据
      this.getData(this.current_page - 1)
    },

    clickNextFn() {
      console.log("next")
      // 因为按钮禁用状态是不能点击按钮, 触发到这个方法的
      // 发送请求,请求下一页的数据
      this.getData(this.current_page + 1)
    }
  },
  updated() {
    window.scrollTo(0,0)
  }
}
</script>

<style lang="less" scoped>
  .special {
    width: 100%;
    width: 100%;
    padding-bottom: 60px;
    background-color: #fcf;
    background-color: #f4f4f4;
    .btn {
      display: flex;
      .van-button {
        flex: 1;
      }
    }
  }

</style>